<template>
  <div>
    <el-form :inline="true" ref="cabinSelectForm" :model="cabinSelectForm" label-width="90px">
      <el-form-item label="启运港">
        <el-input style="width: 120px" placeholder="启运港" v-model="cabinSelectForm.departureStationName"></el-input>
      </el-form-item>
      <el-form-item label="目的港">
        <el-input style="width: 120px" placeholder="目的港" v-model="cabinSelectForm.destinationStationName"></el-input>
      </el-form-item>
      <el-form-item label="箱型">
        <el-select style="width: 100px"  v-model="cabinSelectForm.containerType" placeholder="请选择">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="起运时间">
        <el-date-picker type="date" style="width: 135px" placeholder="选择时间" v-model="cabinSelectForm.departureTime"></el-date-picker>
      </el-form-item>
      <el-form-item label="到达时间">
        <el-date-picker type="date" placeholder="选择时间" v-model="cabinSelectForm.arrivalTime" style="width: 135px"></el-date-picker>
      </el-form-item>
      <el-form-item style="margin-left: 50px">
        <el-button type="primary">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="tableData"
        style="width: 100%"
        stripe
        max-height="520">
      <el-table-column
          fixed
          prop="orderNo"
          label="委托编号"
          align="center"
          width="100">
      </el-table-column>
      <el-table-column
          prop="containerNo"
          label="箱号"
          align="center"
          width="130">
      </el-table-column>
      <el-table-column
          prop="customer"
          label="客户"
          align="center"
          width="260">
      </el-table-column>
      <el-table-column
          prop="customerService"
          label="客服"
          align="center"
          width="80">
      </el-table-column>
      <el-table-column
          prop="containerType"
          label="箱型"
          align="center"
          width="80">
      </el-table-column>
      <el-table-column
          prop="containerQuantity"
          label="箱量"
          align="center"
          width="80">
      </el-table-column>
      <el-table-column
          prop="departureStation"
          label="始发站"
          align="center"
          width="120">
      </el-table-column>
      <el-table-column
          prop="destinationStation"
          label="目的站"
          align="center"
          width="120">
      </el-table-column>
      <el-table-column
          prop="portStation"
          label="过境口岸"
          align="center"
          width="120">
      </el-table-column>
      <el-table-column
          prop="settlementStatus"
          label="结算状态"
          align="center"
          width="120">
        <template #default="{ row }">
          <span :style="{ color: row.settlementStatus === '完成' ? 'blue' : row.settlementStatus === '待支付' ? 'red' : row.settlementStatus === '待处理' ? 'green' : row.settlementStatus === '已完成' ? 'yellow' : 'black' }">{{ row.settlementStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="containerSource"
          label="过境口岸"
          align="center"
          width="120">
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  methods: {
    handleClick(row) {
      console.log(row);
    }
  },
  data() {
    return {
      dialogVisible: false,
      cabinSelectForm:{
        departureStationName:"",
        destinationStationName:"",
        containerType:"",
        departureTime:"",
        arrivalTime:""
      },
      options: [{
        value: '20GP',
        label: '20GP'
      }, {
        value: '20RF',
        label: '20RF'
      }, {
        value: '20HC',
        label: '20HC'
      }, {
        value: '40GP',
        label: '40GP'
      }, {
        value: '40HC',
        label: '40HC'
      },{
        value: '45HC',
        label: '45HC'
      },{
        value: '40RF',
        label: '40RF'
      },{
        value: '45RF',
        label: '45RF'
      }],
      tableData: [{
        "orderNo": "230909910",
        "containerNo": "ABCD5678901",
        "customer": "上海台骅货运代理有限公司沈阳分公司",
        "customerService": "张三",
        "containerType": "40HC",
        "containerSource": "COC",
        "departureStation": "沈阳东",
        "destinationStation": "华沙",
        "portStation": "阿拉山口境",
        "containerQuantity": "3",
        "customerServiceName": "韩旭昌",
        "settlementStatus": "待支付"
      },
        {
          "orderNo": "231015721",
          "containerNo": "WXYZ2345678",
          "customer": "北京运通国际货运代理有限公司",
          "customerService": "李四",
          "containerType": "20GP",
          "containerSource": "COC",
          "departureStation": "北京西",
          "destinationStation": "柏林",
          "portStation": "若羌",
          "containerQuantity": "2",
          "customerServiceName": "王红",
          "settlementStatus": "完成"
        },
        {
          "orderNo": "231125430",
          "containerNo": "PQRS9876543",
          "customer": "深圳盛世国际货运代理有限公司",
          "customerService": "赵五",
          "containerType": "20DV",
          "containerSource": "SOC",
          "departureStation": "深圳港",
          "destinationStation": "纽约",
          "portStation": "广州南",
          "containerQuantity": "1",
          "customerServiceName": "李丽",
          "settlementStatus": "完成"
        },
        {
          "orderNo": "231235671",
          "containerNo": "MNOP3456789",
          "customer": "上海华通货运代理有限公司",
          "customerService": "王六",
          "containerType": "40GP",
          "containerSource": "COC",
          "departureStation": "上海港",
          "destinationStation": "伦敦",
          "portStation": "重庆北",
          "containerQuantity": "2",
          "customerServiceName": "赵亮",
          "settlementStatus": "待支付"
        },
        {
          "orderNo": "231345912",
          "containerNo": "UVWX1234567",
          "customer": "广州金运国际货运代理有限公司",
          "customerService": "刘七",
          "containerType": "40HC",
          "containerSource": "SOC",
          "departureStation": "广州港",
          "destinationStation": "悉尼",
          "portStation": "成都西",
          "containerQuantity": "3",
          "customerServiceName": "陈华",
          "settlementStatus": "待支付"
        },
        {
          "orderNo": "231456153",
          "containerNo": "STUV2345678",
          "customer": "南京鼎盛国际货运代理有限公司",
          "customerService": "孙八",
          "containerType": "20GP",
          "containerSource": "SOC",
          "departureStation": "南京港",
          "destinationStation": "东京",
          "portStation": "郑州东",
          "containerQuantity": "1",
          "customerServiceName": "周明",
          "settlementStatus": "完成"
        },
        {
          "orderNo": "231566394",
          "containerNo": "NOPQ8901234",
          "customer": "武汉盛运国际货运代理有限公司",
          "customerService": "李九",
          "containerType": "40DV",
          "containerSource": "COC",
          "departureStation": "武汉港",
          "destinationStation": "洛杉矶",
          "portStation": "长沙南",
          "containerQuantity": "2",
          "customerServiceName": "赵丽",
          "settlementStatus": "完成"
        },
        {
          "orderNo": "231676635",
          "containerNo": "IJKL4567890",
          "customer": "成都联运国际货运代理有限公司",
          "customerService": "王十",
          "containerType": "20DV",
          "containerSource": "SOC",
          "departureStation": "成都港",
          "destinationStation": "香港",
          "portStation": "重庆西",
          "containerQuantity": "1",
          "customerServiceName": "李敏",
          "settlementStatus": "完成"
        },
        {
          "orderNo": "231786876",
          "containerNo": "JKLM6789012",
          "customer": "重庆宏运国际货运代理有限公司",
          "customerService": "陈十一",
          "containerType": "40HC",
          "containerSource": "SOC",
          "departureStation": "重庆港",
          "destinationStation": "新加坡",
          "portStation": "昆明南",
          "containerQuantity": "3",
          "customerServiceName": "刘伟",
          "settlementStatus": "完成"
        },
        {
          "orderNo": "231897117",
          "containerNo": "EFGH7890123",
          "customer": "上海铁运国际货运代理有限公司",
          "customerService": "杨十二",
          "containerType": "40DV",
          "containerSource": "COC",
          "departureStation": "上海港",
          "destinationStation": "新德里",
          "portStation": "青岛北",
          "containerQuantity": "2",
          "customerServiceName": "王丽丽",
          "settlementStatus": "完成"
        }]
    }
  }
}
</script>

<style>
.pagination{
  margin-top: 3px;
  margin-left: 65%;
}
</style>
